<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="评论内容" width="200">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div v-html="scope.row.content"></div>
          </template>
          <template #reference>
            <span v-html="scope.row.content"></span>
          </template>
        </el-popover>

      </template>
    </el-table-column>
    <el-table-column label="用户昵称" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.publisherNickname }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="点赞数量" width="100">
      <template #default="scope">
        <div>{{ scope.row.likeCount }}</div>
      </template>
    </el-table-column>
    <el-table-column label="源动态内容" width="120">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div v-html="scope.row.dynamicContent"></div>
          </template>
          <template #reference>
            <a :href="'/d-detail/'+scope.row.sourceContentId"  target="_blank">
              <span v-html="scope.row.dynamicContent"></span>
            </a>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="源动态id" width="120">
      <template #default="scope">
        {{ scope.row.sourceContentId }}
      </template>
    </el-table-column>
    <el-table-column label="评论时间" width="200">
      <template #default="scope">
        <span>{{scope.row.createTime}}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <!--        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">-->
        <!--          编辑-->
        <!--        </el-button>-->
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="deleteDialogVisible" title="警告" width="500" center>
    <span>
      你确定要删除这条评论吗？（该评论及其所有子评论都将全部删除）
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="doDelete()">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import emitter from "@/utils/emitter.js";
import {deleteComment, getMyComment} from "@/api/api.js";

const queryParam = reactive(({
  type:2,
  page:1,
  pageSize:50,
}))


const tableData = ref([
  {
    commentId:0,
    content:'',
    publisherId:0,
    publisherNickname:'',
    sourceContentId:0,
    likeCount:0,
    dynamicContent:'',
    createTime:''
  },

])

onMounted(async ()=>{
  emitter.emit("switchCommentType",2)
  const res = await getMyComment(queryParam);
  console.log(res)
  tableData.value = res.data.records;
  // const res = await deleteComment()
})


const curDeleteId = ref()
const handleDelete = (index, row) => {
  deleteDialogVisible.value = true
  curDeleteId.value = row.commentId
  console.log(index, row)
}

const deleteDialogVisible = ref(false)


const doDelete = async () => {
  deleteDialogVisible.value = false
  const res = await deleteComment(curDeleteId.value)
  console.log(res)
  const res1 = await getMyComment(queryParam);
  console.log(res1)
  tableData.value = res1.data.records;
}


</script>
<style lang="scss" scoped>

</style>